<template>
	<view class='shou'>
		<!-- 头部 -->
		<view class="status-contents">
			<!-- 状态栏 -->
			<view class="status top-view"></view>
			<!-- 自定义导航栏 -->
			<view class="title" style="height: 55rpx;">
				<!-- 自定义导航栏左-->
				<view class="city">
					<text class="uni-nav-bar-text">北京</text>
					<uni-icons type="arrowdown" color="#666" size="18" />
				</view>
				<!-- 自定义导航栏中 -->
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="搜影片、影院、演出" />
				</view>
				<!-- 自定义导航栏右 -->
				<view class="city">
					<uni-icons class="icons" type="calendar" color="#666" size="30" />
					<uni-icons class="icons" type="scan" color="#666" size="25" />
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content" style="height: 100%;">

			<!-- 轮播图 -->
			<view class="lun">
				<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
					<swiper class="swiper-box" circular="true" @change="change" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item v-for="(item ,index) in info" :key="index">
							<view class="swiper-item">
								<image class="img" :src="item.content"></image>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>

			<!-- 热映影片 -->
			<view class="all">
				<!-- 热映影片标题 -->
				<view class="title">
					<view style="line-height: 60rpx;height: 60rpx;display: flex; margin-left: 10rpx;">
						<text class="text1">热映影片</text>
						<uni-icons class="icons" type="right" color="#666" size="20" />
					</view>
					<view style="line-height: 60rpx;height: 60rpx;display: flex;">
						<image class="ims" src="/static/shouye/mds.png" >
						</image>
						<uni-tag text="周票房榜" custom-style="
							background-color: white;
							color: rgb(0, 0, 0);
							height: 20rpx;
							margin-top: 15rpx;
							padding: 10rpx 10rpx 10rpx 29rpx;
							border-radius: 15rpx;">
						</uni-tag>
					</view>
				</view>
				<!-- 热映影片内容-->
				<view class="huakuai">
					<scroll-view show-scrollbar="true" scroll-x="true" scroll-left="0" scroll-with-animation="true">
						<view class="huakuai1">
							<view class="yixiaokuai" v-for="(item,index) in dianyin" :key="index">
								<view>
									<image :src="item.image" mode="aspectFill" class="img4" @click="oncliRequst"></image>
								</view>
								<text style="font-weight: 500;">{{item.name.slice(0,7)}}</text><br>
								<uni-tag :text="item.biao" size="small"
									custom-style="background-color: white; margin-top:30rpx; color: rgb(0, 0, 0); padding:5rpx;">
								</uni-tag>
								<view class="tubiao">
									<button style="background-color: #fb3777;
										font-size: x-small;
										border-radius: 50rpx;
										color: white;" type="warn" size="mini" @click="SeatClick(item)">
										购票
									</button>
								</view>
							</view>
							<view class="yixiaokuai">
								<view class="quan">
									<text>全部</text> <br>
									<text>————</text> <br>
									<text>{{dianyin.length}}部</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 奖池 -->
			<view>

			</view>
			<!-- 即将上映 -->
			<view class="jis">
				<!-- 即将上映标题 -->
				<view class="jtitle">
					<view style="line-height: 60rpx;height: 60rpx;display: flex; margin-left: 10rpx;">
						<text class="jtext1">即将上映</text>
						<uni-icons class="jicons" type="right" color="#666" size="20" />
					</view>
					<view style="line-height: 60rpx;height: 60rpx;display: flex;">
						<image class="jims" src="/static/shouye/mds.png">
						</image>
						<uni-tag text="口碑榜" custom-style="
							background-color: white;
							color: rgb(0, 0, 0);
							height: 20rpx;
							margin-top: 15rpx;
							padding: 10rpx 10rpx 10rpx 29rpx;
							border-radius: 15rpx;">
						</uni-tag>
					</view>
				</view>
				<view style="margin-left: 11rpx; font-size: 30rpx;">热门推荐</view>
				<!-- 即将上映内容-->
				<view class="jhuakuai">
					<scroll-view show-scrollbar="true" scroll-x="true" scroll-left="0" scroll-with-animation="true">
						<view class="jhuakuai1">
							<view class="jyixiaokuai" v-for="(item,index) in jianyin" :key="index">
								<view>
									<image :src="item.image" mode="aspectFill" class="jimg4"></image>
								</view>
								<text style="font-weight: 500;">{{item.name.slice(0,7)}}</text><br>
								<view class="jtubiao">
									<text>{{item.biao}}</text>
								</view>
							</view>
							<view class="jyixiaokuai">
								<view class="jquan">
									<text>全部</text> <br>
									<text>————</text> <br>
									<text>{{dianyin.length}}部</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- 精彩演出 -->
			<view class="jing">
				<!-- 精彩演出 标题 -->
				<view class="stitle">
					<view style="line-height: 60rpx;height: 60rpx;display: flex; margin-left: 10rpx;">
						<text class="stext1">精彩演出</text>
						<uni-icons class="sicons" type="right" color="#666" size="20" />
					</view>
					<view style="line-height: 60rpx;height: 60rpx;display: flex;">
						<uni-icons class="sims" type="calendar" color="#666" size="15" />
						<uni-tag text="演出日历" custom-style="
							background-color: white;
							color: rgb(0, 0, 0);
							height: 20rpx;
							margin-top: 15rpx;
							padding: 10rpx 10rpx 10rpx 29rpx;
							border-radius: 15rpx;">
						</uni-tag>
					</view>
				</view>
				<!-- 精彩演出 内容-->
				<view class="shuakuai">
					<scroll-view show-scrollbar="true" scroll-x="true" scroll-left="0" scroll-with-animation="true">
						<!-- 选项卡 -->
						<view class="inv-h-w">
							<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">超值精选</view>
							<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">周末好去处</view>
							<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2">人气推荐</view>
						</view>
						<!-- 选项卡的内容 -->
						<view class="xuan" v-show="Inv == 0">
							<!-- 超值精选 -->
							<view class="shuakuai1">
								<view class="syixiaokuai" v-for="(item,index) in jianyin" :key="index">
									<view>
										<image :src="item.image" mode="aspectFill" class="simg4"></image>
									</view>
									<text style="font-weight: 500;">{{item.name.slice(0,7)}}</text><br>
									<view class="jtubiao">
										<uni-tag :text="item.biao" size="small"
											custom-style="background-color: white; margin-top:30rpx; color: rgb(0, 0, 0); padding:5rpx;">
										</uni-tag>
									</view>
								</view>
								<view class="syixiaokuai">
									<view class="squan">
										<text>查看全部</text>
									</view>
								</view>
							</view>
						</view>

						<view class="xuan" v-show="Inv == 1">
							<!-- 周末好去处 -->
							<view class="shuakuai1">
								<view class="syixiaokuai" v-for="(item,index) in jianyin" :key="index">
									<view>
										<image :src="item.image" mode="aspectFill" class="simg4"></image>
									</view>
									<text style="font-weight: 500;">{{item.name.slice(0,7)}}</text><br>
									<view class="jtubiao">
										<uni-tag :text="item.biao" size="small"
											custom-style="background-color: white; margin-top:30rpx; color: rgb(0, 0, 0); padding:5rpx;">
										</uni-tag>
									</view>
								</view>
								<view class="syixiaokuai">
									<view class="squan">
										<text>查看全部</text>
									</view>
								</view>
							</view>
						</view>

						<view class="xuan" v-show="Inv == 2">
							<!-- 人气推荐 -->
							<view class="shuakuai1">
								<view class="syixiaokuai" v-for="(item,index) in jianyin" :key="index">
									<view>
										<image :src="item.image" mode="aspectFill" class="simg4"></image>
									</view>
									<text style="font-weight: 500;">{{item.name.slice(0,7)}}</text><br>
									<view class="jtubiao">
										<uni-tag :text="item.biao" size="small"
											custom-style="background-color: white; margin-top:30rpx; color: rgb(0, 0, 0); padding:5rpx;">
										</uni-tag>
									</view>
								</view>
								<view class="syixiaokuai">
									<view class="squan">
										<text>查看全部</text>
									</view>
								</view>
							</view>
						</view>

					</scroll-view>
				</view>
			</view>
			<!-- 关注等切换 -->
			<view class="guan">
				<uni-segmented-control 
				:current="currents" 
				:values="items" 
				@clickItem="onClickItem" 
				styleType="text"
				activeColor="#f64d9d">
				</uni-segmented-control>
				<uni-icons style="position: absolute;left: 90%;top: 20rpx;" type="refreshempty" color="#666" size="25" />
				<view class="cont">
					<view v-show="currents === 0">
						<Mo></Mo>
					</view>
					<view v-show="currents === 1">
						<Mo></Mo>
					</view>
					<view v-show="currents === 2">
						<Mo></Mo>
					</view>
					<view v-show="currents === 3">
						<Mo></Mo>
					</view>
					<view v-show="currents === 4">
						<Mo></Mo>
					</view>
				</view>
			</view>

			<!-- 淘票票片单 -->
			<view class="tao">
				<!-- 淘票票标题 -->
				<view class="stie">
					<view style="line-height: 60rpx;height: 60rpx;display: flex; margin-left: 10rpx;">
						<uni-icons type="videocam" color="#666" size="25" />
						<text class="stext1">淘票票片单</text>
						<uni-icons class="sicons" type="right" color="#666" size="20" />
					</view>
				</view>
				<!-- 淘票票内容 -->
				<view class="taop">
					<view class="warp-mask">
						<view class="warps">
							<view style="margin: 15rpx; width: 70%;">
								<text style="font-size: 35rpx;color: #fff;">温文尔雅如黎明，一往情深不辜负</text>
							</view>
							<view style="margin: 15rpx;">
								<text style="font-size: 20rpx;color: #fff">每个笑容都深情款款，和黎明来一场银幕约会</text>
								<uni-icons style="margin-left: 26%;vertical-align: sub;" type="star" color="#fff"
									size="25" />
							</view>
							<view style="margin: 15rpx;">
								<image style="
								 width: 60rpx; 
								 height: 60rpx; 
								 background-color: #eeeeee;
								 border-radius: 45rpx;
								 vertical-align: bottom;
								 margin-right: 10rpx;
								 " src="/static/logo.png"></image>
								<span style="vertical-align: super; color:#fff; font-size: 25rpx;">老少女战士 · 共9部影片</span>
							</view>
							<view class="jhuakuai">
								<scroll-view show-scrollbar="true" scroll-x="true" scroll-left="0"
									scroll-with-animation="true">
									<view class="jhuakuai1">
										<view class="jyixiaokuai" v-for="(item,index) in jianyin" :key="index">
											<view>
												<image :src="item.image" mode="aspectFill" class="jimg4"></image>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Mo from "./mo/mo.vue"
	export default {
		components: {
			Mo
		},
		data() {
			return {
				// 选项卡
				items: ['关注', '推荐', '预告片','热文榜','误杀'],
				currents: 1,
				// 轮播图数据
				info: [{
						content: '/static/shouye/l1.png'
					},
					{
						content: '/static/shouye/l2.png'
					},
					{
						content: '/static/shouye/l3.png'
					}
				],

				// 轮播图参数
				autoplay: true,
				interval: 1500,
				duration: 700,
				current: 0,
				mode: 'round',
				// 热映影片数据
				dianyin: [{
						"name": "小丑回魂",
						"biao": "票房榜No.1",
						"image": "/static/shouye/v2.png"
					},
					{
						"name": "京城81号",
						"biao": "惊悚悬疑",
						"image": "/static/shouye/v3.png"
					},
					{
						"name": "爱有来生",
						"biao": "段奕宏实力演绎",
						"image": "/static/shouye/v4.png"
					},
					{
						"name": "小丑回魂",
						"biao": "票房榜No.1",
						"image": "/static/shouye/v2.png"
					},
					{
						"name": "京城81号",
						"biao": "惊悚悬疑",
						"image": "/static/shouye/v3.png"
					},
					{
						"name": "爱有来生",
						"biao": "段奕宏实力演绎",
						"image": "/static/shouye/v4.png"
					},
					{
						"name": "小丑回魂",
						"biao": "票房榜No.1",
						"image": "/static/shouye/v2.png"
					},
					{
						"name": "京城81号",
						"biao": "惊悚悬疑",
						"image": "/static/shouye/v3.png"
					},
					{
						"name": "爱有来生",
						"biao": "段奕宏实力演绎",
						"image": "/static/shouye/v4.png"
					}
				],
				// 即将上映
				jianyin: [{
						"name": "小丑回魂",
						"biao": "12月20日上映",
						"image": "https://tse2-mm.cn.bing.net/th/id/OIP-C.t_0Z0FsF8yXVmyd-Ktl0MAHaKX?w=204&h=285&c=7&r=0&o=5&pid=1.7"
					},
					{
						"name": "京城81号",
						"biao": "12月20日上映",
						"image": "https://tse4-mm.cn.bing.net/th/id/OIP-C.CPP-4HnPPn7iLZaaIpOTqwHaKg?w=204&h=290&c=7&r=0&o=5&pid=1.7"
					},
					{
						"name": "爱有来生",
						"biao": "12月22日上映",
						"image": "/static/shouye/v4.png"
					},
					{
						"name": "小丑回魂",
						"biao": "12月24日上映",
						"image": "/static/shouye/v2.png"
					},
					{
						"name": "京城81号",
						"biao": "12月26日上映",
						"image": "/static/shouye/v3.png"
					},
					{
						"name": "爱有来生",
						"biao": "12月28日上映",
						"image": "/static/shouye/v4.png"
					},
					{
						"name": "小丑回魂",
						"biao": "1月2日上映",
						"image": "/static/shouye/v2.png"
					},
					{
						"name": "京城81号",
						"biao": "1月10日上映",
						"image": "/static/shouye/v3.png"
					},
					{
						"name": "爱有来生",
						"biao": "1月12日上映",
						"image": "/static/shouye/v4.png"
					}
				],
				// 选项卡索引
				Inv: 0,
			}

		},
		methods: {
			//选座
			SeatClick(item){
				console.log(item);
				uni.navigateTo({
					url:"/pages/SeatModule/seat?name="+item.name
				})
			},
			//路由跳转
			oncliRequst(){
				uni.navigateTo({
					url:"/pages/VoteModule/vote"
				})
			},
			// 选项卡切换
			onClickItem(e) {
				if (this.currents != e.currentIndex) {
					this.currents = e.currentIndex;
				}
			},
			// 选项卡切换
			changeTab(Inv) {
				that.navIdx = Inv;
			},
			// 轮播图方法
			change(e) {
				this.current = e.detail.current;
			}
		},

	}
</script>

<style lang="scss" scoped>
	.shou {
		width: 100%;
		background-color: #ffffff;

		// 自定义导航栏
		.status-contents {
			height: calc(var(--status-bar-height) + 50px);

			.top-view {
				width: 100%;
				position: fixed;
				z-index: 99;
				top: 0;
			}

			.status {
				background-color: #ffffff;
				height: var(--status-bar-height);
			}

			.title {
				width: 100%;
				position: fixed;
				z-index: 99;
				padding: 3rpx;
				background-color: #ffffff;
				padding-bottom: 30rpx;
				display: flex;
				top: var(--status-bar-height);

				.city {
					display: flex;
					font-size: 25rpx;
					align-items: center;
					margin-top: 4%;
					margin-left: 15rpx;

					.icons {
						margin-right: 10rpx;
					}
				}

				.input-view {
					display: flex;
					flex-direction: row;
					flex: 1;
					background-color: #f5f5f5;
					height: 55rpx;
					border-radius: 25rpx;
					padding: 0 15rpx;
					flex-wrap: nowrap;
					margin: 14rpx 40rpx;
					line-height: 55rpx;
				}

				.input-uni-icon {
					line-height: 55rpx;
				}

				.nav-bar-input {
					height: 55rpx;
					line-height: 55rpx;
					padding: 0 5px;
					font-size: 25rpx;
					background-color: #f5f5f5;
				}
			}
		}

		// 内容区域样式
		.content {
			width: 100%;
			margin: 20rpx 0rpx 15rpx 0rpx;
			background-color: #ffffff;

			// 轮播图
			.lun {
				width: 90%;
				height: 280rpx;
				margin: 0 auto;

				.swiper-box {
					height: 280rpx;
					border-radius: 15rpx;

					.swiper-item {
						height: 280rpx;
						border-radius: 15rpx;

						.img {
							width: 100%;
							border-radius: 15rpx;
							height: 280rpx;
						}
					}
				}
			}

			// 热映影片
			.all {
				width: 95%;
				display: block;
				background-color: #ffffff;
				margin: 2.5%;
				margin-top: 25rpx;
				border-radius: 15rpx;

				// 热映影片标题
				.title {
					width: 98%;
					justify-content: space-between;
					display: flex;
					margin-top: 25rpx;

					.text1 {
						text-align: left;
						font-size: 30rpx;
						margin-top: 5rpx;
						background-color: white;
					}

					.icons {
						margin-top: 5rpx;
					}

					.ims {
						width: 25rpx;
						height: 25rpx;
						margin-top: 25rpx;
						position: relative;
						right: -30rpx;
					}
				}

				// 热映影片内容
				.huakuai {
					width: 100%;
					display: flex;
					overflow: hidden;
					white-space: nowrap;
					margin-top: 15rpx;

					.huakuai1 {
						display: inline-block;

						.yixiaokuai {
							display: inline-block;
							text-align: left;
							margin-left: 10rpx;
							margin-right: 10rpx;

							.img4 {
								width: 210rpx;
								height: 320rpx;
								border-radius: 20rpx;
							}

							.tubiao {
								width: 100rpx;
								text-align: left;
								margin-top: 20rpx;
								margin-bottom: 5rpx;
							}
						}

						.yixiaokuai:last-child {
							width: 210rpx;
							height: 320rpx;
							margin-left: 10rpx;
							margin-right: 10rpx;
							background-color: #f2f2f2;
							border-radius: 20rpx;
							vertical-align: top;

							.quan {
								text-align: center;
								padding-top: 40%;
							}
						}
					}
				}
			}

			// 即将上映
			.jis {
				width: 95%;
				display: block;
				background-color: #ffffff;
				margin: 2.5%;
				margin-top: 25rpx;
				border-radius: 15rpx;

				// 即将上映标题
				.jtitle {
					width: 98%;
					justify-content: space-between;
					display: flex;
					margin-top: 25rpx;

					.jtext1 {
						text-align: left;
						font-size: 30rpx;
						margin-top: 3rpx;
						background-color: white;
					}

					.jicons {
						margin-top: 3rpx;
					}

					.jims {
						width: 25rpx;
						height: 25rpx;
						margin-top: 27rpx;
						position: relative;
						right: -30rpx;
					}
				}

				// 即将上映内容
				.jhuakuai {
					width: 100%;
					display: flex;
					overflow: hidden;
					white-space: nowrap;
					margin-bottom: 5rpx;
					margin-top: 15rpx;

					.jhuakuai1 {
						display: inline-block;

						.jyixiaokuai {
							display: inline-block;
							text-align: left;
							margin-left: 10rpx;
							margin-right: 10rpx;

							.jimg4 {
								width: 210rpx;
								height: 320rpx;
								border-radius: 20rpx;
							}

							.jtubiao {
								width: 140rpx;
								text-align: left;
								margin-top: 8rpx;
								margin-bottom: 5rpx;
								font-size: 20rpx;
							}
						}

						.jyixiaokuai:last-child {
							width: 210rpx;
							height: 320rpx;
							margin-left: 10rpx;
							margin-right: 10rpx;
							background-color: #f2f2f2;
							border-radius: 20rpx;
							vertical-align: top;

							.jquan {
								text-align: center;
								padding-top: 40%;
							}
						}
					}
				}
			}

			// 精彩演出
			.jing {
				width: 95%;
				display: block;
				background-color: #ffffff;
				margin: 2.5%;
				margin-top: 25rpx;
				border-radius: 15rpx;

				// 精彩演出标题
				.stitle {
					width: 98%;
					justify-content: space-between;
					display: flex;
					margin-top: 25rpx;

					.stext1 {
						text-align: left;
						font-size: 30rpx;
						margin-top: 5rpx;
						background-color: white;
					}

					.sicons {
						margin-top: 5rpx;
					}

					.sims {
						width: 30rpx;
						height: 25rpx;
						margin-top: 10rpx;
						position: absolute;
					}
				}

				// 精彩演出内容
				.shuakuai {
					width: 100%;
					display: flex;
					overflow: hidden;
					white-space: nowrap;
					margin-top: 5rpx;

					/* 选项卡样式 */
					.inv-h-w {
						background-color: #FFFFFF;
						height: 70rpx;
						display: flex;
					}

					.inv-h {
						font-size: 20rpx;
						width: 85rpx;
						margin-left: 15rpx;
						margin-right: 30rpx;
						text-align: left;
						color: #333333;
						height: 70rpx;
						line-height: 70rpx;
					}

					.inv-h-se {
						color: #343333;
						font-weight: 800;
					}

					// 选项卡内容
					.xuan {
						margin: 5rpx;

						.shuakuai1 {
							display: inline-block;

							.syixiaokuai {
								display: inline-block;
								text-align: left;
								margin-left: 10rpx;
								margin-right: 10rpx;

								.simg4 {
									width: 210rpx;
									height: 320rpx;
									border-radius: 20rpx;
								}

								.stubiao {
									width: 100rpx;
									text-align: left;
									margin-top: 20rpx;
									margin-bottom: 5rpx;
								}
							}

							.syixiaokuai:last-child {
								width: 210rpx;
								height: 320rpx;
								margin-left: 10rpx;
								margin-right: 10rpx;
								background-color: #f2f2f2;
								border-radius: 20rpx;
								vertical-align: top;

								.squan {
									text-align: center;
									padding-top: 60%;
								}
							}
						}

					}
				}


			}
			
			// 关注切换等
			.guan{
				width: 95%;
				display: block;
				background-color: #ffffff;
				margin: 2.5%;
				margin-top: 25rpx;
				position: relative;
				.segmented-control{
				    display: flex;
				    box-sizing: border-box;
					font-weight: 600;
				    height: 80rpx;
				    overflow: hidden;
				    cursor: pointer;
				    width: 465rpx;
				}
				.cont{
					margin: 20rpx;
				}
			}

			// 淘票票片单
			.tao {
				width: 95%;
				display: block;
				background-color: #ffffff;
				margin: 2.5%;
				margin-top: 25rpx;
				border-radius: 15rpx;

				// 淘票票标题
				.stie {
					width: 98%;
					justify-content: space-between;
					display: flex;
					margin-top: 25rpx;
				}

				// 淘票票内容
				.taop {
					width: 100%;
					height: 580rpx;
					display: flex;
					overflow: hidden;
					white-space: nowrap;
					margin-top: 5rpx;
					border-radius: 25rpx;
					position: relative;
					background: url('/static/shouye/v5.png') center no-repeat;
					background-size: cover;

					.warp-mask {
						height: 100%;
						width: 100%;
						background: rgba(159, 112, 99, 0.5);

						.warps {
							margin-left: 40rpx;
							margin-top: 130rpx;

							// 即将上映内容
							.jhuakuai {
								width: 100%;
								display: flex;
								overflow: hidden;
								white-space: nowrap;
								margin-bottom: 5rpx;
								margin-top: 15rpx;

								.jhuakuai1 {
									display: inline-block;

									.jyixiaokuai {
										display: inline-block;
										text-align: left;
										margin-left: 10rpx;
										margin-right: 10rpx;

										.jimg4 {
											width: 130rpx;
											height: 170rpx;
										}

									}

								}
							}
						}
					}
				}
			}
		}
	}
</style>